<template>
    <div>
      <el-row>
        <el-col :span="24">
          <el-form :inline="true" :model="house" class="demo-form-inline" size="mini">
            <el-form-item label="租住类型">
              <el-select v-model="house.renttype" placeholder="类型选择">
                <el-option label="整租" value="整租"></el-option>
                <el-option label="合租" value="合租"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="所在城市">
              <el-select v-model="house.city" placeholder="城市选择">
                <el-option label="西安" value="西安"></el-option>
                <el-option label="深圳" value="深圳"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="面积范围m²">
              <el-col :span="11">
                <el-input type="text" placeholder="输入最小面积" v-model="house.area1" style="width: 100%;"></el-input>
              </el-col>
              <el-col class="line" :span="2">-</el-col>
              <el-col :span="11">
                <el-input placeholder="输入最大面积" v-model="house.area2" style="width: 100%;"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="4" v-for="(o,index) in houseList" :key="o.id" :offset="index%4 > 0 ? 2 : 1"> <!--==={{index%4}}===-->
          <el-card :body-style="{ padding: '0px' }">
            <img :src="o.thumbnailurl" class="image">
            <div style="padding: 14px;">
              <div class="span1">
              <span>{{o.renttype}}</span>
              <span>{{o.title}}</span>
              <span>{{o.kichennum}}室</span>
              <span>{{o.livingroomnum}}厅</span>
              <span>{{o.toiletnum}}卫</span><br>
              <span>{{o.address}}</span>
              <span>月租金: {{o.monthrent}}</span><br>
              </div>
              <div class="bottom clearfix">
                <time class="time">创建时间: {{o.createtime}}</time>
                <router-link to='/detail'><el-button type="text" class="button">查看详情</el-button></router-link>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 分页-->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageable.current"
          :page-sizes="pageable.pageSizes"
          :page-size="pageable.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageable.total">
        </el-pagination>
      </div>
</template>

<script>
  //import axios from 'axios';
    export default {
      name: "Mainmain",
      data(){
        return{
          pageable:{
            current:1, //当前页
            pageSizes:[4,8,12,16], //每页多少数据
            pageSize:4, //
            total:10
          },
          house:{
            renttype:'',//出租类型
            city:'',
            area1:'',
            area2:''
          },
          houseList:[
            {
              id:'1',
              createtime:'',//创建时间
              renttype:'',//出租类型
              title:'',//房屋名称
              address:'',//详细地址
              thumbnailurl:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',//缩略图
              monthrent:'',//月租金
              toiletnum:'',//卫生间数量
              kichennum:'',//厨房数量
              livingroomnum:'',//客厅数量
              area1:'',
              area2:''
            }
          ]
        }
      },
      mounted(){
          this.loadAll();
      },
      methods:{
        loadAll(){
          this.request.get('http://localhost:8083/house',{
            params:{
              current:this.pageable.current,//当前第几页
              size:this.pageable.pageSize //每页多少个数据
            }
          }).then(res=>{
            console.log(res);
            this.houseList = res.date.records;
            this.pageable.total = res.date.total;
          }).catch(res=>{
            console.log(res);
          })
        },
        handleSizeChange(val) {
          //console.log(`每页 ${val} 条`);
          this.pageable.pageSize=val;
          this.loadAll();
        },
        handleCurrentChange(val) {
          //console.log(`当前页: ${val}`);
          this.pageable.current=val;
          this.loadAll();
        },
        onSubmit(){
          this.request.get('http://localhost:8083/house',{
            params:{
              rentType:this.house.renttype,
              city:this.house.city,
              area1:this.house.area1,
              area2:this.house.area2,
              current:this.pageable.current,//当前第几页
              size:this.pageable.pageSize //每页多少个数据
            }
          }).then(res=>{
            console.log(res);
            this.houseList = res.date.records;
            this.pageable.total = res.date.total;
          })
        }
      }
    }
</script>

<style scoped>
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }
  .span1 {
    font-size: 14px;
    color: #999;
  }
  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
</style>
